<template>
	<view class="page">

		<view >
			<view style="border-top-left-radius: 24upx;border-top-right-radius: 24upx;">
				<view style="width: 100%;height: 384upx;border-top-left-radius: 24upx;border-top-right-radius: 24upx;">
					<swiper class="swiper" autoplay="true" interval="5000" circular="true" :duration="200">
						<swiper-item v-for="(item,index) in bannerList" :key="index">
							<image
								style="width: 702upx;height: 256upx;border-radius: 12upx;margin-left: 24upx;margin-right: 24upx;margin-top: 18upx;"
								:src="item.imgUrl" mode=""></image>
						</swiper-item>

					</swiper>

					<view style="position: relative;background: #ffe8e6;width: 702upx;height: 80upx;margin-left: 24upx;
					margin-right: 24upx;border-radius: 24upx;margin-top: 24upx;">
						<image class="notify-icon" src="../../static/images/notify-icon.png"
							style="position: absolute;left: 1%;margin-top: 16upx;" mode=""></image>
						<view style="margin-left: 80upx;">
							<swiper style="height: 80upx;" :autoplay="true" :interval="3000" :duration="1000" :disable-touch="false" :touchable="false"
								:circular="true" :vertical="true">
								<swiper-item v-for="(item,index) in notifyList" :key="index" @touchmove.stop="true">
									<view class="swiper-item" style="color: #FF4E4C;font-size: 26upx;">{{item}}</view>
								</swiper-item>

							</swiper>
						</view>

					</view>

				</view>
			</view>
		</view>




		<view class="pop-window-wrapper">
			<view class="pop-window-in-wrapper" @click="publishDemand">
				<image class="pop-window-img" src="../../static/images/publish-demand.png" mode=""></image>
				<view class="pop-title">发布需求</view>
				<view class="desc">让技术主动找我</view>
			</view>
			<view class="pop-window-in-wrapper" @click="publishCode">
				<image class="pop-window-img" src="../../static/images/publish-code.png" mode=""></image>
				<view class="pop-title">发布源码</view>
				<view class="desc">现成源码省时赚钱</view>
			</view>

			<view class="pop-window-in-wrapper" @click="toTechAuth">
				<image class="pop-window-img" src="../../static/images/tech-icon.png" mode=""></image>
				<view class="pop-title">技术认证</view>
				<view class="desc">认证成为技术接单</view>
			</view>

		</view>
		
		<view style="width: 100%;height: 24upx;background: #F8F8F8;">
			
		</view>

		<view class="demand-wrapper" @click="detailDemand(item.id)" v-for="(item,index) in demandList" :key="index">

			<view
				style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 36upx;">
				<view style="display: flex;flex-direction: row;margin-left: 24upx;">
					<view style="font-size: 28upx;color: #191919;white-space: nowrap;overflow: hidden;
						text-overflow: ellipsis;font-weight: bold;">{{item.title}}
					</view>
					<view v-if="item.status===3" style="color: #FFFFFF;font-size: 24upx;height: 34upx;
					border-radius: 8upx;margin-left: 12upx;padding: 4upx 12upx;background-color: #FF4E4C;">
						<span>待接单</span>
					
					</view>
					<view v-if="item.status===4 " style="color: #FFFFFF;font-size: 24upx;height: 34upx;
					border-radius: 8upx;margin-left: 12upx;padding: 4upx 12upx;background-color: #CCCCCC;">
						<span>已接单</span>

					</view>
					<view v-if="item.status===5 " style="color: #FFFFFF;font-size: 24upx;height: 34upx;
					border-radius: 8upx;margin-left: 12upx;padding: 4upx 12upx;background-color: #CCCCCC;">
						<span>进行中</span>

					</view>
					<view v-if="item.status===6 " style="color: #FFFFFF;font-size: 24upx;height: 34upx;
					border-radius: 8upx;margin-left: 12upx;padding: 4upx 12upx;background-color: #CCCCCC;">
						<span>已完成</span>
					</view>
				</view>

				<view style="display: flex;flex-direction: row;align-items: center;">
					<span style="font-size: 20upx;color: #FF3232;">￥</span>
					<span style="font-size: 34upx;color: #FF3232;font-weight: bold;margin-right: 15upx;">
						{{item.estimateAmount}}
					</span>
				</view>
			</view>

			<view class="time-type-wrapper">
				<view class="home-time-wrapper">
					<image class="time-icon" style="margin-left: 12upx;" src="../../static/images/time-icon.png"
						mode=""></image>
					<view style="font-size: 24upx;color: #FF4E4C;line-height: 40upx;margin-left: 6upx;">{{item.hopeFinishTime}}
					</view>
				</view>
				<view class="demand-type">{{item.techTypeName}}</view>
			</view>

			<view class="publish-time-wrapper">
				<view style="font-size: 24upx;color: #B7B8BB;">编号: {{item.demandNo}}</view>
				<view class="publish-time-view-wrapper">
					<view style="display: flex;flex-direction: row;margin-right: 24upx;">
						<image class="publish-time-icon" style="align-self: center;margin-right: 8upx;"
							src="../../static/images/publish-time-icon.png" mode=""></image>
						<view style="font-size: 24upx;color: #B7B8BB;">{{item.publishTime}}</view>
					</view>
					<view style="display: flex;flex-direction: row;margin-right: 24upx;">
						<image class="view-count-icon" style="align-self: center;margin-right: 8upx;"
							src="../../static/images/view-count-icon.png" mode=""></image>
						<view style="font-size: 24upx;color: #B7B8BB;">{{item.viewCount}}</view>
					</view>
				</view>


			</view>
			

		</view>
		<view v-if="showText" style="font-size: 24upx;color: #B7B8BB; width: 100%;text-align: center;">暂无更多需求~</view>

	</view>


</template>


<script>
	import {
		banner_list
	} from '../../api/home/banner.js'

	import {
		get
	} from '../../utils/local.js'
	import{set} from '../../utils/local.js'
	import {
		notify_list
	} from '../../api/home/notify.js'
	import {
		demand_list,
		demand_detail
	} from '../../api/home/demand.js'
	import {user_info,login_code} from '../../api/mine/auth.js'
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				isLogin:false,
				interval: 2000,
				duration: 500,
				demandList: [],
				bannerList: [],
				notifyList: [],
				pageNumber:1,
				showText:false
			}
		},
		onLoad() {
			this.getNotifyList()
			this.getBannerList()
		},
		onReachBottom() {
			if(!this.showText){
				this.pageNumber++;
				this.getDemandList()
				uni.showLoading({
					title:'加载中~'
				})
			}
		
		},
		onShow() {
			this.getNotifyList()
			this.getBannerList()
			this.getDemandList()
			let token=get('token')
			if(token){
				this.isLogin=true
			}

		},
		onPullDownRefresh() {
			this.pageNumber=1
			this.getDemandList()
			setTimeout(function(){
				uni.stopPullDownRefresh()
			},800)
		},

		methods: {

			toTechAuth() {
				if(this.isLogin){
					uni.navigateTo({
						url: '../tech-auth/tech-auth'
					})
				}else{
					this.login()
				}
				
			},
			getBannerList() {
				let params = {}
				banner_list(params).then(res => {
					if (res.status === 200) {
						this.bannerList = res.data
					}
				})
			},

			getNotifyList() {
				let params = {}
				notify_list(params).then(res => {
					if (res.status === 200) {
						this.notifyList = res.data
					}
				})
			},
			getDemandList() {
				let params = {}
				let userInfo=get('userInfo')
				if(userInfo){
					if(JSON.parse(userInfo) !== null){
						params.userId=JSON.parse(userInfo).userId
					}
				}
				
				params.pageNumber=this.pageNumber
				demand_list(params).then(res => {
					if(res.status ===200){
						if(res.data !== null){
							if(this.pageNumber===1){
								this.demandList=res.data
							}else{
								this.demandList = [...this.demandList,...res.data]
							}
							
						}else{
							this.showText=true
						}
					}
					
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			detailDemand(id) {
				// if(this.isLogin){
					
				// }else{
				// 	this.login()
				// }
				uni.navigateTo({
					url: '../demand-detail/demand-detail?id=' + id
				})
				
			},
			publishDemand() {
				if(this.isLogin){
					uni.navigateTo({
						url: '../publish-demand/publish-demand'
					})
				}else{
					this.login()
				}
				
			},
			publishCode() {
				if(this.isLogin){
					uni.navigateTo({
						url: "../publish-code/publish-code"
					})
				}else{
					this.login()
				}
				
			},
			getUserInfo(){
				let token=get('token')
				if(token){
					this.isLogin=true
					user_info().then(res=>{
						console.log(res)
						this.userInfo=res.data
						set('userInfo',JSON.stringify(res.data))
					})
					
				}
				
			},
			login(){
				
				if(this.isLogin){
					return
				}
				var that = this;
				let code = '';
				uni.login({
					provider: "weixin",
					success(res) {
						 code = res.code
					}
				})
				uni.getUserProfile({
					provider:'weixin',
					lang:'zh_CN',
					desc:"用于获取用户信息",
					success: (result) => {
						console.log(result.userInfo)
						let params={}
						params.code=code;
						params.wxUserInfoRequest=result.userInfo;
						login_code(params).then(res=>{
							console.log(res.data)
							set('token',res.data)
							that.getUserInfo()
							setTimeout(function() {
								uni.navigateTo({
									url: '../login/login'
								})
							}, 1000)
						})
					}
				})
			},
		}
	}
</script>

<style>
	.publish-time-view-wrapper {
		display: flex;
		flex-direction: row;
	}

	.demand-type {
		border: 1upx solid #FFD5AB;
		height: 40upx;
		font-size: 24upx;
		line-height: 40upx;
		padding: 0upx 12upx;
		color: #FF9428;
		text-align: center;
		margin-left: 12upx;
		border-radius: 8upx;
	}



	.demand-title {
		font-size: 28upx;
		width: 414upx;
		font-weight: bold;
		color: #191919;
	}

	.nav-title-wrapper {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: relative;

	}

	.nav-title {
		color: #191919;
		font-size: 32upx;
		margin-top: 104upx;
	}

	.demand-status {
		margin-left: 12upx;
		background: #FF4E4C;
		color: #FFFFFF;
		font-size: 24upx;
		height: 32upx;
		line-height: 32upx;
		width: 88upx;
		text-align: center;
		border-radius: 8upx;
		margin-right: 24upx;

	}

	.publish-time-wrapper {
		display: flex;
		margin-top: 20upx;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 24upx;
		margin-bottom: 36upx;
	}

	.home-time-wrapper {
		display: flex;
		height: 40upx;
		width: 180upx;
		text-align: center;
		flex-direction: row;
		border: 1upx solid #FFC9C8;
		border-radius: 8upx;
		align-items: center;
	}

	.time-type-wrapper {
		display: flex;
		flex-direction: row;
		margin-top: 16upx;
		margin-left: 24upx;
	}

	.demand-title-wrapper {
		display: flex;
		flex-direction: row;
		margin-left: 24upx;
		margin-top: 36upx;
		justify-content: space-between;
	}

	.view-count-icon {
		width: 24upx;
		height: 24upx;
	}

	.publish-time-icon {
		width: 24upx;
		height: 24upx;
	}

	.time-icon {
		width: 24upx;
		height: 24upx;
	}

	.demand-wrapper {
		/* margin-top: 40upx; */
		background: #FFFFFF;
		border-radius: 24upx;
		margin-left: 24upx;
		margin-right: 24upx;
		/* padding: 24upx 24upx; */
		display: flex;
		flex-direction: column;
		border-bottom: 2upx solid #F8F8F8;

	}

	.pop-title {
		color: #191919;
		font-size: 24upx;
		align-self: center;
	}

	.pop-window-img {
		align-self: center;
	}

	.desc {
		font-size: 20upx;
		color: #A6A6A6;
		align-self: center;
	}

	.pop-window-in-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.pop-window-in-wrapper:nth-child(1) {
		margin-left: 50upx;
	}

	.pop-window-in-wrapper:nth-child(3) {
		margin-right: 50upx;
	}

	/* 	.publish-code{
		 margin-left: 94upx;
	}
	.tech-icon{
		margin-right: 94upx;
	} */
	.pop-window-wrapper {
		margin-top: 24upx;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		width: 702upx;
		margin-left: 24upx;
		height: 212upx;
		border-radius: 24upx;
		justify-content: space-between;
	}

	.pop-window-wrapper image {
		width: 72upx;
		height: 72upx;
	}

	.notify-icon {
		width: 40upx;
		height: 40upx;
		margin-left: 24upx;
	}

	.notify-message {
		margin-left: 12upx;
	}

	.notify-in-wrapper {
		display: flex;
		flex-direction: row;

	}

	.notify-wrapper {
		margin-left: 24upx;
		margin-right: 24upx;
		font-size: 26upx;
		border-radius: 24upx;
		margin-top: 24upx;
		height: 80upx;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.title-banner-wrapper {
		position: relative;
	}




	.nav-title-wrapper {
		width: 100%;
		height: 200upx;
		background: linear-gradient(#FF4E4C, #FF6463);
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: relative;

	}

	.nav-title {
		color: #FFFFFF;
		font-size: 30upx;
		margin-top: 104upx;
	}

	.banner-item {
		width: 100%;
	}

	.banner-wrapper {
		height: 256upx;
		width: 702upx;
		position: absolute;
		margin-top: 176upx;
	}


	swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	swiper-item image {
		border-radius: 24upx;
	}
</style>
